<template>
	<view class="detail-container">
		<!-- 预约状态 -->
		<view class="status-card" :class="getStatusClass(reserveDetail.status)">
			<view class="status-header">
				<text class="status-text">{{ getStatusText(reserveDetail.status) }}</text>
				<text class="status-time">{{ formatDate(reserveDetail.creatorTime) }}</text>
			</view>
			<view class="status-desc" v-if="reserveDetail.status === 3">
				<text>驳回原因：{{ reserveDetail.cancleRemark || '无' }}</text>
			</view>
		</view>

		<!-- 预约信息 -->
		<view class="info-section">
			<view class="section-title">
				<u-icon name="home" size="30" color="#2979ff"></u-icon>
				<text class="title-text">会议室信息</text>
			</view>
			<view class="info-card">
				<view class="info-item">
					<text class="item-label">会议室名称</text>
					<text class="item-value">{{ reserveDetail.roomName }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">预约人数</text>
					<text class="item-value">{{ reserveDetail.reserveNums }}人</text>
				</view>
				<view class="info-item" v-if="reserveDetail.description">
					<text class="item-label">会议描述</text>
					<text class="item-value">{{ reserveDetail.description }}</text>
				</view>
			</view>
		</view>

		<!-- 预约时段 -->
		<view class="info-section">
			<view class="section-title">
				<u-icon name="calendar" size="30" color="#2979ff"></u-icon>
				<text class="title-text">预约时段</text>
				<view class="title-action" v-if="reserveDetail.status === 1">
					<!-- <u-button type="primary" size="mini" @click="showTimeModal">添加时段</u-button> -->
				</view>
			</view>
			<view class="info-card">
				<view class="time-list" v-if="reserveDetail.roomTimes && reserveDetail.roomTimes.length > 0">
					<view class="time-item" v-for="(item, index) in reserveDetail.roomTimes" :key="index">
						<text class="time-text">{{ item.Name }}</text>
						<u-icon name="clock" size="16" color="#909399"></u-icon>
						<text class="time-text">{{ formatTimeRange(item) }}</text>
						<!-- <u-icon v-if="reserveDetail.status === 1" name="close" size="16" color="#fa3534"
							@click.stop="removeTime(index)"></u-icon> -->
					</view>
				</view>
				<view class="empty-tip" v-else>
					<text>暂无预约时段信息</text>
				</view>
			</view>
		</view>

		<!-- 服务项目 -->
		<view class="info-section">
			<view class="section-title">
				<u-icon name="server-man" size="30" color="#2979ff"></u-icon>
				<text class="title-text">服务项目</text>
				<view class="title-action" v-if="reserveDetail.status === 1">
					<!-- <u-button type="primary" size="mini" @click="showServiceModal">添加服务</u-button> -->
				</view>
			</view>
			<view class="info-card">
				<view class="service-list" v-if="reserveDetail.valueService && reserveDetail.valueService.length > 0">
					<view class="service-item" v-for="(item, index) in reserveDetail.valueService" :key="index">
						<view class="service-info">
							<text class="service-name">{{ item.ServiceName }} * {{ item.UnitNum }}</text>
							<!-- <text class="service-desc" v-if="item.description">{{ item.description }}</text> -->
						</view>
						<!-- 费用注释 -->
						<!-- <view class="service-actions">
							<text class="service-price">¥{{ item.UnitPrice }}</text>
						</view> -->
					</view>
				</view>
				<view class="empty-tip" v-else>
					<text>暂无服务项目</text>
				</view>
			</view>
		</view>

		<!-- 价格信息 -->
		<!-- 费用注释 -->
		<!-- <view class="info-section">
			<view class="section-title">
				<u-icon name="rmb-circle" size="18" color="#2979ff"></u-icon>
				<text class="title-text">价格信息</text>
			</view>
			<view class="info-card">
				<view class="price-item">
					<text class="price-label">会议室费用</text>
					<text class="price-value">¥{{ reserveDetail.reserPrice }}</text>
				</view>
				<view class="price-item">
					<text class="price-label">服务项目费用</text>
					<text class="price-value">¥{{ reserveDetail.servicePrice }}</text>
				</view>
				<view class="price-divider"></view>
				<view class="price-item total">
					<text class="price-label">合计金额</text>
					<text class="price-value total-price">¥{{ getTotalPrice() }}</text>
				</view>
			</view>
		</view> -->

		<!-- 预约人信息 -->
		<view class="info-section">
			<view class="section-title">
				<u-icon name="account" size="30" color="#2979ff"></u-icon>
				<text class="title-text">预约人信息</text>
			</view>
			<view class="info-card">
				<view class="info-item" v-if="reserveDetail.nickName">
					<text class="item-label">姓名</text>
					<text class="item-value">{{ reserveDetail.nickName }}</text>
				</view>
				<view class="info-item">
					<text class="item-label">手机号码</text>
					<view class="item-value with-action">
						<text>{{ formatPhone(reserveDetail.mobilephone) }}</text>
						<u-icon name="phone" size="30" color="#2979ff" @click="callPhone(reserveDetail.mobilephone)">
						</u-icon>
					</view>
				</view>
				<view class="info-item" v-if="reserveDetail.departmentId">
					<text class="item-label">所属部门</text>
					<text class="item-value">{{ reserveDetail.departmentName || '未知部门' }}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<block v-if="reserveDetail.status === 1">
				<u-button type="primary" @click="confirmReserve">确认预约</u-button>
				<u-button type="error" @click="showRejectModal">驳回预约</u-button>
			</block>
			<block v-if="reserveDetail.status === 2">
				<!-- <u-button type="warning" text="取消预约" @click="cancelReserve" v-if="!reserveDetail.finStatus"></u-button> -->
				<!-- 费用注释 -->
				<!-- <u-button type="success" @click="settleReserve" v-if="!reserveDetail.finStatus">生成账单</u-button> -->
				<!-- <u-button type="info" v-if="reserveDetail.finStatus === 1">查看账单</u-button> -->
			</block>
			<!-- <block v-if="reserveDetail.status === 3">
				<u-button type="warning" text="取消预约" @click="cancelReserve" v-if="!reserveDetail.finStatus"></u-button>
			</block> -->
		</view>

		<!-- 驳回弹窗 -->
		<u-modal v-model="rejectModal.show" :title="rejectModal.title" show-cancel-button confirm-text="确认驳回"
			@confirm="confirmReject" @cancel="cancelReject">
			<view class="slot-content">
				<u-input v-model="rejectModal.reason" type="textarea" placeholder="请输入驳回原因" height="100"></u-input>
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '', // 预约ID
				loading: false,
				reserveDetail: {
					id: '',
					departmentId: '',
					roomId: '',
					wid: '',
					nickName: '',
					mobilephone: '',
					mobilephoneSf: '',
					roomName: '',
					reserveNums: 0,
					reserPrice: 0,
					servicePrice: 0,
					description: '',
					valueService: [],
					roomTimes: [],
					status: 1,
					finStatus: 0,
					creatorTime: new Date(),
					cancleRemark: ''
				},
				// 驳回弹窗
				rejectModal: {
					show: false,
					title: '驳回预约',
					content: '',
					reason: ''
				},
				// 添加时段弹窗
				timeModal: {
					show: false,
					date: '',
					beginTime: '',
					endTime: ''
				},
				// 添加服务弹窗
				serviceModal: {
					show: false,
					name: '',
					price: '',
					description: ''
				},
				// 日期选择器
				showDatePickerModal: false,
				datePickerParams: {
					year: true,
					month: true,
					day: true
				},
				// 时间选择器
				showTimePickerModal: false,
				timePickerParams: {
					hour: true,
					minute: true
				},
				// 当前选择的是开始时间还是结束时间
				currentTimeType: 'begin'
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.getReserveDetail()
			}
		},
		methods: {
			// 获取预约详情
			getReserveDetail() {
				this.loading = true

				this.$u.api.getReserveInfo({id:this.id}).then(res => {
					this.reserveDetail = res.data
				})

			},

			// 获取状态文本
			getStatusText(status) {
				switch (status) {
					case 0:
						return '已取消'
					case 1:
						return '待确认'
					case 2:
						return '已确认'
					case 3:
						return '已驳回'
					default:
						return '未知状态'
				}
			},

			// 获取状态样式类
			getStatusClass(status) {
				switch (status) {
					case 0:
						return 'status-canceled'
					case 1:
						return 'status-pending'
					case 2:
						return 'status-confirmed'
					case 3:
						return 'status-rejected'
					default:
						return ''
				}
			},

			// 格式化日期
			formatDate(date) {
				if (!date) return ''
				const d = new Date(date)
				const year = d.getFullYear()
				const month = (d.getMonth() + 1).toString().padStart(2, '0')
				const day = d.getDate().toString().padStart(2, '0')
				const hour = d.getHours().toString().padStart(2, '0')
				const minute = d.getMinutes().toString().padStart(2, '0')
				return `${year}-${month}-${day} ${hour}:${minute}`
			},

			// 格式化时间段
			formatTimeRange(timeItem) {
				if (!timeItem) return ''
				return `${timeItem.ReserDate} ${timeItem.ReserBegTime}-${timeItem.ReserEndTime}`
			},

			// 格式化手机号
			formatPhone(phone) {
				if (!phone) return ''
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			},

			// 计算总价
			getTotalPrice() {
				return (parseFloat(this.reserveDetail.reserPrice) + parseFloat(this.reserveDetail.servicePrice)).toFixed(2)
			},

			// 拨打电话
			callPhone(phone) {
				if (!phone) return
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},

			// 确认预约
			confirmReserve() {
				uni.showModal({
					title: '确认预约',
					content: '确定要通过此预约申请吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中'
							})
							this.$u.api.confirmReserve({id:this.id}).then(res => {
								uni.hideLoading()
								this.reserveDetail.status = 2
								uni.showToast({
									title: '已确认预约',
									icon: 'success'
								})
							})
						}
					}
				})
			},

			// 显示驳回弹窗
			showRejectModal() {
				this.rejectModal.show = true
				this.rejectModal.reason = ''
			},

			// 确认驳回
			confirmReject() {
				if (!this.rejectModal.reason.trim()) {
					uni.showToast({
						title: '请输入驳回原因',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '处理中'
				})
				this.$u.api.rejectReserve({id:this.id,cancleRemark:this.rejectModal.reason}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '已驳回预约',
						icon: 'success'
					})
					// this.reserveDetail.status = 3;
					this.rejectModal.show = false
					this.getReserveDetail()
				})
			},
			cancelReject(){
				this.rejectModal.show = false
			},

			// 取消预约
			cancelReserve() {
				uni.showModal({
					title: '取消预约',
					content: '确定要取消此预约吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中'
							})
							this.$u.api.cancelReserve({id:this.id}).then(res => {
								uni.hideLoading()
								uni.showToast({
									title: '已取消预约',
									icon: 'success'
								})
							})
						}
					}
				})
			},

			// 结算预约
			settleReserve() {
				uni.showModal({
					title: '生成账单',
					content: '确定要对此预约进行生成账单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '处理中'
							})
							
							this.$u.api.genFinOrder(this.reserveDetail).then(res => {
								uni.hideLoading()
								uni.showToast({
									title: '生成账单成功',
									icon: 'success'
								})
								this.getReserveDetail(this.id)
							})
							
							// // 模拟请求
							// setTimeout(() => {
							// 	uni.hideLoading()
							// 	this.reserveDetail.finStatus = 1
							// 	uni.showToast({
							// 		title: '结算成功',
							// 		icon: 'success'
							// 	})
							// }, 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f7fa;
	}

	.detail-container {
		padding-bottom: 140rpx;
	}

	.status-card {
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 12rpx;
		color: #ffffff;

		.status-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.status-text {
				font-size: 32rpx;
				font-weight: 500;
			}

			.status-time {
				font-size: 24rpx;
				opacity: 0.8;
			}
		}

		.status-desc {
			margin-top: 20rpx;
			font-size: 26rpx;
			opacity: 0.9;
		}
	}

	.status-pending {
		background: linear-gradient(to right, #1890ff, #36a3ff);
	}

	.status-confirmed {
		background: linear-gradient(to right, #19be6b, #47d685);
	}

	.status-rejected {
		background: linear-gradient(to right, #fa3534, #fb6d6c);
	}

	.status-canceled {
		background: linear-gradient(to right, #909399, #a9abb2);
	}
	
	.slot-content{
		margin: 12px;
		    border: 1px solid #909399;
		    border-radius: 7px;
	}

	.info-section {
		margin: 20rpx;

		.section-title {
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			.title-text {
				margin-left: 10rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #303133;
				flex: 1;
			}

			.title-action {
				margin-left: auto;
			}
		}
	}

	.info-card {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;

		.item-label {
			color: #606266;
			font-size: 28rpx;
		}

		.item-value {
			color: #303133;
			font-size: 28rpx;
			font-weight: 500;
		}

		.with-action {
			display: flex;
			align-items: center;

			text {
				margin-right: 16rpx;
			}
		}
	}

	.time-list {
		.time-item {
			display: flex;
			align-items: center;
			padding: 16rpx 0;

			.time-text {
				margin-left: 10rpx;
				font-size: 28rpx;
				color: #303133;
				flex: 1;
			}
		}
	}

	.service-list {
		.service-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 16rpx 0;

			.service-info {
				flex: 1;

				.service-name {
					font-size: 28rpx;
					color: #303133;
					font-weight: 500;
				}

				.service-desc {
					font-size: 24rpx;
					color: #909399;
					margin-top: 6rpx;
				}
			}

			.service-actions {
				display: flex;
				align-items: center;

				.service-price {
					font-size: 28rpx;
					color: #ff9900;
					font-weight: 500;
					margin-right: 10rpx;
				}

				.remove-icon {
					padding: 5rpx;
				}
			}
		}
	}

	.price-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;

		.price-label {
			font-size: 28rpx;
			color: #606266;
		}

		.price-value {
			font-size: 28rpx;
			color: #303133;
		}

		&.total {
			.price-label {
				font-size: 32rpx;
				font-weight: 500;
			}

			.total-price {
				font-size: 36rpx;
				color: #ff9900;
				font-weight: 600;
			}
		}
	}

	.price-divider {
		height: 1rpx;
		background-color: #f0f0f0;
		margin: 10rpx 0;
	}

	.empty-tip {
		padding: 30rpx 0;
		text-align: center;
		color: #909399;
		font-size: 26rpx;
	}

	.action-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-around;
		z-index: 9;

		.u-button {
			flex: 1;
			margin: 0 10rpx;
		}
	}

	.modal-form {
		padding: 10rpx 0;

		.form-item {
			margin-bottom: 20rpx;

			.form-label {
				display: block;
				font-size: 28rpx;
				color: #606266;
				margin-bottom: 10rpx;
			}
		}
	}
</style>
